Motivation

• Provide a small, reusable UI foundation inspired by beUI to modernize the popup visuals (rounded cards, subtle glassmorphism, gradient accents, soft shadows, dark mode) while preserving all existing logic and storage behavior.
• Make the visual primitives available for incremental migration of screens so the redesign can proceed screen-by-screen without touching business logic or background/manifest code.
• Avoid adding heavy runtime dependencies to keep the popup bundle small and fast, preferring a tiny local cn helper and lightweight primitives.

Description

• Added a new UI primitives library under src/components/ui/ including Button, Input, Card, Tabs, ToggleSwitch, Select, Tooltip, Toast, Badge, StatCard, EmptyState, SectionHeader, a cn helper, and an index barrel for easy imports.
• Kept existing popup API stable by re-exporting the new primitives from the original entrypoint files (entrypoints/popup/components/Button.tsx, Input.tsx, Toggle.tsx) so the rest of the codebase and tests keep the same imports while switching to the new visuals.
• Refactored the popup shell/header and surrounding container in entrypoints/popup/App.tsx to use the new Card/Button/Toast primitives and beUI-inspired styling (gradients, rounded-2xl/3xl cards, soft shadow-soft, backdrop blur), while preserving all state, storage calls, account switching logic, alias generation/copy flows, and feature behavior.
• Extended tailwind.config.ts to include ./src/**/*.{tsx,ts} for class scanning and added a boxShadow.soft token used by new components, and kept icons inline to avoid adding additional packages.
• Minor test-driven adjustments to primitive classes to preserve expected test behavior (e.g., disabled opacity and toggle background classes) without changing functional behavior.
• Did not modify storage services, business logic, background scripts, or manifest configuration.

Testing

• Ran yarn compile and the TypeScript build succeeded.
• Ran yarn test and all unit tests passed after minor styling adjustments to primitives (tests green).
• Produced a production build using yarn build and the extension bundle was generated successfully (.output/chrome-mv3 artifacts present).
• Attempted to add external UI packages with yarn add clsx tailwind-merge lucide-react motion but the registry returned 403, so a local cn helper and inline/small svg icons were used as a lightweight workaround to avoid unresolved dependencies and keep the popup size small.

Codex Task